<!--
 * @Author: huangjiahua
 * @Date: 2021-07-16 14:11:49
 * @LastEditTime: 2022-09-26 10:21:22
 * @LastEditors: pmy
 * @Description: In User Settings Edit
 * @FilePath: \bdcar-net\src\components\theOne\LoginValidate.vue
-->
<template>
  <div class="jc-component__range">
    <div class="jc-range" :class="rangeStatus ? 'success' : ''">
      <div class="process"></div>
      <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>
      <span>{{ rangeStatus ? successText : startText }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'loginValidate',
  props: {
    // 成功之后的函数
    successFun: {
      type: Function,
      default: () => {
        return () => { }
      }
    },
    //失败之后的函数
    errorFun: {
      type: Function,
      default: () => {
        return () => { }
      }
    },
    //成功图标
    successIcon: {
      type: String,
      default: 'el-icon-success'
    },
    //成功文字
    successText: {
      type: String,
      default: '验证成功'
    },
    //开始的图标
    startIcon: {
      type: String,
      default: 'start-icon'
      // default: 'el-icon-d-arrow-right'
    },
    //开始的文字
    startText: {
      type: String,
      default: '请拖住滑块，拖动到最右边'
    },
  },
  data() {
    return {
      disX: 0,
      rangeStatus: false
    }
  },
  methods: {
    //滑块移动
    rangeMove(e) {
      let ele = e.target;
      let startX = e.clientX;
      let eleWidth = ele.offsetWidth;
      let parentWidth = ele.parentElement.offsetWidth;
      let MaxX = parentWidth - eleWidth;
      if (this.rangeStatus) {//不运行
        return false;
      }
      document.onmousemove = (e) => {
        const process = document.querySelector('.process');
        let endX = e.clientX;
        this.disX = endX - startX;
        if (this.disX <= 0) {
          this.disX = 0;
        }
        if (this.disX >= MaxX - eleWidth) {//减去滑块的宽度,体验效果更好
          this.disX = MaxX;
        }
        process.style.width = this.disX + 17 + 'px';
        process.style.transition = '.01s all';
        ele.style.transition = '.1s all';
        ele.style.transform = 'translateX(' + this.disX + 'px)';
        ele.style.left = '8px';
        e.preventDefault();
      }
      document.onmouseup = () => {
        const process = document.querySelector('.process');
        if (this.disX !== MaxX) {
          process.style.width = '0px';
          process.style.transition = '.5s all';
          ele.style.transition = '.5s all';
          ele.style.transform = 'translateX(0)';
          ele.style.left = '-6px';
          //执行失败的函数
          this.errorFun && this.errorFun();
        } else {
          this.rangeStatus = true;
          //执行成功的函数
          document.querySelector('.jc-range span').style.zIndex = 3
          this.successFun && this.successFun();
        }
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.flex-jcai {
  display: flex;
  justify-content: center;
  align-items: center;
}

.jc-component__range {
  width: 389px;
  margin: 0 auto;

  .process {
    position: absolute;
    left: 0;
    z-index: 2;
    display: inline-block;
    height: 42px;
    background-color: rgb(79 125 247);
  }

  .jc-range {
    background-color: rgba(236, 225, 225, 0.75);
    position: relative;
    transition: 1s all;
    user-select: none;
    color: rgb(71 77 88);
    .flex-jcai();
    height: 42px;
    /*no*/
    border-radius: 5px;

    &.success {
      background-color: rgb(79 125 247);
      color: #fff;

      i {
        color: rgb(79 125 247);
      }
    }


    i {
      position: absolute;
      left: -6px;
      width: 56px;
      height: 130%;
      color: rgb(79 125 247);
      border: 1px solid #d8d8d8;
      cursor: pointer;
      font-size: 24px;
      background: #ffffff;
      box-shadow: 2.24008px 2.98677px 4.48015px rgba(5, 21, 78, 0.22);
      border-radius: 50%;
      z-index: 2;
      // background-size: 100% 100%;
      .flex-jcai();
    }
  }
}
</style>